<template>
	<div class="minority-swiper swiper">
		<h3>
			<p>小众种草</p><label>游侠客独一无二的旅行体验</label>
		</h3>
		<ul class="swiper-wrapper">
			<li v-for="it in list" :key="it.id" class="swiper-slide">
				<img :src="it.url"/>
				<label>{{it.txt}}</label>
				<p>{{it.msg}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'Minority',
		props:['propMinority'],
		data(){
			return{
				list:[]
			}
		},
		updated(){
			new Swiper('.minority-swiper',{
				slidesPerView:3,
			})	
		},
		watch:{
			propMinority(){
				this.list=this.propMinority
			}
		}
	}
</script>

<style scoped>
	.minority-swiper{
		width: 95%;
		border-radius: 0.3rem;
		margin-top: 0.2rem;
	}
	.minority-swiper h3{
		display: flex;
		align-items: center;
	}
	.minority-swiper h3 p{
		margin-right: 0.3rem;
		font-weight: bold;
		font-size: 0.4rem;
	}
	.minority-swiper h3 label{
		padding: 0.3rem;
		height: 0.05rem;
		line-height: 0.05rem;
		background: #fff3ea;
		color: #ff9e51;
		font-size: 0.24rem;
		border-radius: 0.28rem;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.minority-swiper ul{
		width: 100%;
	}
	.minority-swiper ul li{
		width: 38%;
		padding-left: 0.1rem;
		text-align: center;
		color: white;
	}
	.minority-swiper ul li img{
		width: 100%;
		height: 100%;
	}
	.minority-swiper ul li:first-child img{
		border-radius: 0.3rem 0 0 0.3rem;
	}
	.minority-swiper ul li:last-child img{
		border-radius: 0 0.3rem 0.3rem 0;
	}
	.minority-swiper ul li label{
		font-size: 0.4rem;
		font-weight: bold;
		position: relative;
		bottom: 1.3rem;
	}
	.minority-swiper ul li p{
		font-size: 0.4rem;
		padding-top: 0.2rem;
		position: relative;
		bottom: 1.3rem;
	}
</style>
